<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="renderer" content="webkit">
   <title>首页 - 道路运输从业人员安全学习监管平台</title>
   <!-- import CSS -->
   <link rel="stylesheet" href="/style/default/index.css">
   <link rel="stylesheet" href="/style/default/my.css">
   <link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
   <style>
      .btn_cls {
         padding: 15px 10px 10px 10px;
         width: 90%;
         font-size: 1.1rem;
      }

      .btn_cls i {
         font-size: 2.0rem;
         height: 3rem;
      }

      .btn_cls2 {
         padding: 15px 10px 10px 10px;
         width: 90%;
         text-align: left;
      }

      .btn_cls2 span {
         font-size: 1.2rem;
         height: 3rem;
      }

      .btn_cls2 div {
         font-size: 0.9rem;
         text-align: right;
      }

      table.imagetable {
         font-family: verdana, arial, sans-serif;
         font-size: 11px;
         color: #333333;
         border-width: 1px;
         border-color: #999999;
         border-collapse: collapse;
      }

      table.imagetable th {
         background: #9cbefd;
         border-width: 1px;
         padding: 8px;
         border-style: solid;
         border-color: #999999;
      }

      table.imagetable td {
         border-width: 1px;
         padding: 5px;
         border-style: solid;
         border-color: #999999;
         text-align: center;
      }
   </style>
</head>

<body style="background-color:#f8f8f8;margin: 10px;">
   <div id="app" style="padding: 0px;">

      <el-card shadow="always" body-style="padding:5px;">
         <div>
            <el-date-picker type="month" v-model="searchMonth" placeholder="选择月" value-format="yyyy-MM" size="small">
            </el-date-picker>
            <el-button type="primary" @click="searchFailStudyData()" size="small">查询</el-button>
            <el-button type="primary" @click="" size="small">导出报表</el-button>
         </div>
      </el-card>

      <div style="margin-top: 10px;">
         <el-table v-loading="dataLoading" ref="tableRef"
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%;"
            :cell-style="{padding:'5px'}" row-key="id" border highlight-current-row :height="tableHeight"
            :max-height="tableHeight" size="small">
            <el-table-column prop="id" label="学员ID" width="90" fixed="left">
            </el-table-column>
            <el-table-column prop="real_name" label="姓名" width="100" fixed="left">
            </el-table-column>
            <el-table-column prop="org_name" label="所属公司" width="160" show-overflow-tooltip>
            </el-table-column> 
            <el-table-column prop="idcard" label="身份证号" width="160">
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="120">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="60">
            </el-table-column>
            <el-table-column prop="resident" label="户口" width="100" show-overflow-tooltip >
            </el-table-column>
            <el-table-column prop="birthday" label="出生日期" width="120">
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="60">
            </el-table-column>
            <el-table-column prop="education" label="文化程度" width="80">
            </el-table-column>
            <el-table-column prop="nation" label="民族" width="80">
            </el-table-column>
            <el-table-column prop="addr" label="住址" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="last_login_time" label="最后登录时间" width="140">
               <template slot-scope="scope">
                  <span>{{ timestampToTime(scope.row.last_login_time, "yyyy-MM-dd hh:mm") }}</span>
               </template>
            </el-table-column>
            <el-table-column prop="last_study_time" label="最后学习时间" width="140">
               <template slot-scope="scope">
                  <span>{{ timestampToTime(scope.row.last_study_time, "yyyy-MM-dd hh:mm") }}</span>
               </template>
            </el-table-column>
            <el-table-column prop="last_success_time" label="最后通过时间" width="140">
               <template slot-scope="scope">
                  <span>{{ timestampToTime(scope.row.last_success_time, "yyyy-MM-dd hh:mm") }}</span>
               </template>
            </el-table-column>
            <el-table-column prop="login_number" label="总登录次数" width="100">
            </el-table-column>
            <el-table-column prop="study_number" label="总学习次数" width="100">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80" fixed="right">
               <template slot-scope="scope">
                  <span v-for="item in optionData.status" v-if="scope.row.status === item.value"
                     :style="{color:item.color}">{{item.name}}</span>
               </template>
            </el-table-column>
         </el-table>
         <div class="block" style="margin-top: 20px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
               :current-page="currentPage" :page-sizes="[5, 10, 15, 30, 50, 100]" :page-size="pageSize"
               layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
            </el-pagination>
         </div>
      </div>



   </div>
</body>
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="http://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script src="/js/validate.js"></script>
<script src="/js/my_util.js?t=29348"></script>

<script>

   var marginHeight = 130; // 高差数

   var vm = new Vue({
      el: '#app',
      data: function () {
         return {
            tableHeight: window.innerHeight - marginHeight, // 表格高，当窗口改变大小的时候通过 pageResize 修改该值
            dataLoading: false,     // 显示登录等待中
            searchMonth: '2022-10',
            tableData: [],          // 条目数据 
            currentPage: 1,                    // 当前页
            pageSize: 10,                      // 每页数据数
         }
      },
      mounted() {
         // 当窗口大小发生改变的时候系统自动调用
         window.onresize = () => {
            this.pageResize();
         }
      },
      computed: {
         // 从缓存中读取
         optionData: function () {
            var optionDataStr = sessionStorage.getItem('optionData');
            return JSON.parse(optionDataStr || "{}");
         },
      },
      methods: {
         // 改变表格高度
         pageResize() {
            this.tableHeight = window.innerHeight - marginHeight;
         },

         // 改变每页数据条数
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            console.log(this.pageSize);
            this.pageSize = val;
         },

         // 改变当前页数
         handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
         },

         // 搜索机构学习数据
         searchFailStudyData() {
            var idArray = parent.getCheckedKeysToCallback();
            if (idArray.length > 0) {
               if (isNoNull(this.searchMonth)) {
                  var data = {};
                  data.ids = idArray.join();
                  data.month = this.searchMonth;

                  vm.dataLoading = true;
                  // type: 1学习人员;2离职人员;3停职人员;4上线人员;5通过人员;6未通过人员;7连续两月未通过人员
                  axios.post('/admin/organ/3/show/student_info!ids_month.bu', data)
                     .then(function (response) {
                        if (response.data.code > 0) {
                           vm.tableData = response.data.bundle;
                        } else {
                           vm.$message.error(response.data.msg);
                        }
                        vm.dataLoading = false;
                     })
                     .catch(function (error) {
                        vm.$message.error('网络错误，请稍后再试！');
                        vm.dataLoading = false;
                     });
               } else {
                  vm.$message.error("请选择需要统计的月份");
               }
            } else {
               vm.$message.error("请勾选需要统计的公司");
            }
         },
      },
   });

   // 自动执行，读取表格数据等
   function loadInitData() {

      // 读取参数信息至缓存
      axios.get('/admin/sys/get_option_params.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               sessionStorage.setItem('optionData', JSON.stringify(response.data.bundle));
            } else if (response.data.code == 0) {
               vm.$message.error("没有数据");
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取菜单数据失败！' + error);
         })
   }

   loadInitData();

</script>

</html>